<!-- 个人中心 -->
<template>
  <div class="rightContentDataPage">
    <div class="titleBox">
      <span>个人中心</span>
    </div>
    <div class="tips">认证福利！我们的优势，轰隆隆平台拥有众多建企合作伙伴以及数万机械资源，助理机械方、工程方撮合，合作共赢，为用户创造货真价实利益！</div>
    <!-- 个人中心没有数据列表 -->
    <div class="listDataContent" v-if="msgNode.is_user_status!==3">
      <div class="itemListData">
        <div class="flexBox" >
          <div class="itemFlex">
          <img src="./../../../../public/img/personal/xunzuxuqiu.png" class="leftLogoImg1">
          <div class="content">
            <div class="titleName">寻租需求</div>
            <div class="styleBg"></div>
            <div class="contentInfo">您还未发布寻租需求</div>
            <div class="contentInfo">发布寻租需求，为您匹配优质机械主</div>
          </div>
          </div>
          <div class="rightBtn" @click="gomechanicalRent">
            <div>快速租赁机械</div>
            <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
      </div>
      <div class="itemListData">
        <div class="flexBox">
          <div class="itemFlex">
          <img src="./../../../../public/img/personal/zhihuitianyan.png" class="leftLogoImg2">
          <div class="content">
            <div class="titleName">智慧天眼</div>
            <div class="styleBg"></div>
            <div class="contentInfo">轰隆隆自助研发的物联网终端，利用物联网技术，实时监控机械的工作</div>
            <div class="contentInfo">状态、机械位置以及工况视频等，使机械设备数字化</div>
          </div>
          </div>
          <div class="rightBtn" @click="goSee">
            <div>查看详情</div>
            <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
      </div>
      <div class="itemListData">
          <div class="flexBox" >
          <div class="itemFlex">
          <img src="./../../../../public/img/personal/jixieguanjia.png" class="leftLogoImg">
          <div class="content">
            <div class="titleName">机械管家</div>
            <div class="styleBg"></div>
            <div class="contentInfo">添加机械，增加机械曝光度，提升机械租赁商机</div>
          </div>
          </div>
          <div class="rightBtn" @click="goMechanics">
            <div>去添加机械</div>
            <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
      </div>
    </div>
    <!-- 个人中心有数据列表 -->
    <div class="listDataContent" v-if="msgNode.is_user_status==3">
      <div class="itemListData">
        <div class="flexBoxOne">
          <div class="contentNumber">
            <div>
              <div class="titleName">寻租需求</div>
              <div class="styleBg"></div>
            </div>
            <div class="itemBox">
            <div class="itemData">
              <div class="itemNum">{{needlistcountData.preOrderCount}}</div>
              <div class="itemName">寻租中</div>
            </div>
            <div class="itemData">
              <div class="itemNum">{{needlistcountData.preContractCount}}</div>
              <div class="itemName">签约中</div>
            </div>
            <div class="itemData">
              <div class="itemNum">{{needlistcountData.prePayCount}}</div>
              <div class="itemName">已签约</div>
            </div>
            </div>
          </div>
          <div class="rightBtn" @click="gomechanicalRent">
            <div>快速租赁机械</div>
            <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
      </div>
      <!-- 没数据 -->
      <div class="itemListData">
        <div class="flexBoxOne">
          <div class="contentNumber">
            <div>
              <div class="titleName">智慧天眼</div>
              <div class="styleBg"></div>
            </div>
            <div class="itemBox">
            <div class="itemDataOne">
              <div class="itemNum">{{infoData.iot_count}}</div>
              <div class="itemName">智能监管设备</div>
            </div>
            <div class="itemDataOne">
              <div class="itemNum">{{infoData.day_acc_on}}</div>
              <div class="itemName">今日上工设备</div>
            </div>
            <div class="itemDataOne">
              <div class="itemNum">{{infoData.day_acc_off}}</div>
              <div class="itemName">今日待工设备</div>
            </div>
            </div>
          </div>
          <div class="rightBtn" @click="goSee">
            <div>查看详情</div>
            <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
      </div>
      <div class="itemListData">
        <div class="flexBoxOne">
          <div class="contentNumber">
            <div>
              <div class="titleName">机械管家</div>
              <div class="styleBg"></div>
            </div>
            <div class="itemBox">
            <div class="itemDataTwo">
              <div class="itemNum">{{infoData.checking_count}}</div>
              <div class="itemName">待审核机械</div>
            </div>
            <div class="itemDataTwo">
              <div class="itemNum">{{infoData.fail_count}}</div>
              <div class="itemName">未过审机械</div>
            </div>
            <div class="itemDataTwo">
              <div class="itemNum">{{infoData.save_count}}</div>
              <div class="itemName">未提交机械</div>
            </div>
            </div>
          </div>
          <div class="rightBtn" @click="goMechanics">
            <div>去添加机械</div>
            <img src="./../../../../public/img/success/rightIcon.png" class="rightIcon">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import {getStatistics,getPersonalStatus,needlistcount} from './../../../apis/api.js'
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
  data() {
 // 这里存放数据
    return {
      infoData:{},//数据列表
      msgNode:{},
      needlistcountData:{},
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
  gomechanicalRent(){
      // 判断是否登录
      var myValue = [];
      myValue.push({
        startTime: '',
        typeSize: '',
        unit: '',
        norm: '',
        total: '',
        number: 1,
        listData: [],
        typeName: '',
        icon_url: '',
      });
      this.$router.push({
        name: "MechanicalRent",
        params: { myValue: myValue },
      });
  },
  goMechanics(){
    this.$router.push({path:'/addMechanics'})
  },
  goSee(){
    this.$message.warning('敬请期待！')
    // window.location.href = 'https://rest.honglonglong.com.cn/es/#/Login';
  },
  async getStatistics(){
    try{
      let res = await getStatistics()
      if(res.data.result =='1'){
        this.infoData = res.data.body
      }
    }catch(e){}
  },
  // 个人中心机械天眼数据与机械管家数据
  async getPersonalStatus(){
    try {
      let res = await getPersonalStatus()
      if(res.data.result =='1'){
        this.msgNode = res.data.body
      }
    }catch(e){}
  },
  // 机械主获取订单角标数字
  async needlistcount(){
    try {
      let res = await needlistcount()
      if(res.data.result =='1'){
        this.needlistcountData = res.data.body
      }
    }catch(e){}
  }
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getPersonalStatus()
  this.getStatistics()
  this.needlistcount()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.rightContentDataPage{
  width: 920px;
  margin-left: 20px;
}
.titleBox{
  width: 100%;
  background: #fff;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  span{
    margin-left: 20px;
  }
}
.tips{
  margin-top: 20px;
  width: 100%;
  padding: 20px 0;
  background: #ECF5FF;
  text-align: center;
  font-size: 12px;
  color: #333;
  span{
    margin-left: 20px;
  }
}
.itemListData{
  width: 100%;
  height: 150px;
  background: #FFFFFF;
  margin-top: 20px;
}
.leftLogoImg{
  width: 32px;
  height: 32px;
}
.leftLogoImg1{
  width: 29px;
  height: 38px;
}
.leftLogoImg2{
  width: 35px;
  height: 31px;
}
.flexBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  box-sizing: border-box;
}
.flexBoxOne{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 40px;
  box-sizing: border-box;
}
.itemFlex{
  display: flex;
  align-items: center;
  margin-left: 45px;
}
.itemNum{
  font-size: 30px;
  color: #FF7D59;
  font-weight: 600;
}
.itemName{
  margin-top: 12px;
  font-size: 14px;
  color: #999;
}
.content{
  margin-left: 28px;
}
.rightBtn{
  margin-right: 66px;
  width: 200px;
  height: 40px;
  background: #FF7D59;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.rightIcon{
  width: 37px;
  height: 11px;
  margin-left: 20px;
}
.titleName{
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.styleBg{
 width: 17px;
  height: 3px;
  background: #FF7D59;
  margin: 10px 0 14px 0;
}
.contentInfo{
  font-size: 14px;
  color: #999;
}
.contentNumber{
  display: flex;
  align-items: center;
  margin-left: 45px;
}
.itemBox{
  display: flex;
  margin-left: 50px;
}
.itemData{
  margin-right: 90px;
}
.itemDataOne{
  margin-right: 50px;
}
.itemDataTwo{
  margin-right: 65px;
}
</style>
